<style media="screen">
.head-container{
  position: relative;
  padding: 10px 0px 14px;
  border-bottom: 1px solid #E3E3E5;
}
.head-container .mes{
  overflow: hidden;
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 200px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 23px;
}
.second-select .js-selected-q{
    margin-left: 0px;
    padding-left: 25px;
  }
  .third-select .js-selected-q{
    margin-left: 0px;
    padding-left: 50px;
  }
  .js-selected-q b{
    width: auto!important
  }
  .js-selected-project .js-selected-project-box .js-selected-q{
    background-position: 170px -30px;
  }
  .js-selected-project .js-selected-project-box div.active{
    background-position: 170px 26px;
  }
  .js-selected-project .js-selected-project-box .js-selected-q b{
    margin-left: 10px;
  }
  .second-select>li b{
    text-indent: 0em;
  }
  .first-select .ellipsis-1{
    min-width: 175px;
    max-width: 150px;
    padding-right: 45px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .second-select .ellipsis-1{
    min-width: 140px;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .third-select b{
    min-width: 120px;
    max-width: 80px;
    padding-right: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
</style>


<!-- 右边 -->
<div class="js-selected-project ">
  <div class="css-pack-up"></div>
  <div class="js-selected-project-bg">
  </div>
  <div class="js-selected-project-box">
    <div class="select-project">
      <!--右侧公司-->
    </div>
  </div>
</div>

<section class="pl-24 pr-24" id="hireIndex">
  <hl-page-header title="退租管理"></hl-page-header>
  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="flow">
        <p>信息检索</p>
        <div>
          <input type="text" class="global_ipt_text" autocomplete="off" placeholder="客户/合同名称/合同编号/退租编号" v-model="keyword" style="width:220px;">
        </div>
      </div>

      <div class="flow">
        <p>退租时间</p>
        <div class="pull-left">
          <web-calendar v-model="beginDate" tips="起始时间" width="156"></web-calendar>
        </div>
        <div class="pull-left line-height-34 color-999 plr-12">-</div>
        <div class="pull-left">
          <web-calendar v-model="endDate" tips="截止时间" width="156"></web-calendar>
        </div>

      </div>

      <div class="flow" v-if="policysList.indexOf('d6') > -1">
        <p>对接人</p>
        <div class="line-height-34 relative">
          <input
            type="text"
            class="global_ipt_text"
            placeholder="姓名/电话"
            v-model="rperson.name"
            @input.perent.stop="onInputDJR"
            @keyup.enter="date"
            autocomplete="off">
            <ul
              class="append-temp absolute bg-fff border z-998 line-height-34"
              style="left:12px; top:35px; max-height:200px; overflow-y:scroll; width: 90%; text-indent:0.8em;"
              v-if="rperson.list.length > 0">
              <li v-for="item in rperson.list" :key="item.userId" class="clearfix" @click="setRperson(item.userName, item.userId)">
                <span class="pull-left">{{item.userName}}</span>
                <span class="pull-right">{{item.userPhone}}</span>
              </li>
            </ul>
        </div>
      </div>

      <div class="button-group">
        <hl-button @on-click="selectMenuList" size="mini">查询</hl-button>
        <hl-button @on-click="resetBtn" size="mini">重置</hl-button>
      </div>
    </div>
  </div>

  <div class="global_screening_container">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:476px;"></span>
  </div>

  <!--流式布局表格-->
  <section class="fixed-config-table-container global_table" style="margin:10px 0;border:1px solid #E5E5E5"  @mouseenter="showScroll" @mouseleave="hideScroll">
    <!-- 内容表格 -->
    <div class="fixed-config-table-wrap" :class="{'config-table-scroll':isScroll}">
      <div :style="tbTitleWidth">
        <div class="config-table-title-wrap dy-flex global_table_title">
          <div class="config-table-title-item" :class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}"   v-if="item.isShow == 'Y'"  v-for="(item,index) in tbTitle">
            <span>{{item.displayName ? item.displayName : item.name}}</span>
          </div>
        </div>

        <div class="config-table-content-wrap">
          <ul  class="dy-flex global_table_item" v-for="(item,index) in data">
            <li :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}"  v-if="item1.isShow == 'Y'" v-for="(item1,index1) in tbTitle" :title="( item1.value == 'wCode' || item1.value == 'zlfName' )?item[item1.value]:''">
              <span v-if="item1.isShow == 'Y' && item1.value != 'auditState' && item1.value != 'withdrawDate' && item1.value != 'total' ">{{item[item1.value] | formatUndefined}}</span>
              <span v-if="item1.isShow == 'Y' && item1.value == 'withdrawDate' " :title="item[item1.value] | formatDate">{{item[item1.value] | formatDate}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'auditState' ">{{item[item1.value] | auditState}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'total' ">
                <span v-if="item[item1.value] >= 0">{{Math.abs(item[item1.value])}}(应收)</span>
                <span v-if="item[item1.value] < 0">{{Math.abs(item[item1.value])}}(应退)</span>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 操作 -->
    <div class="config-table-operate-wrap">
      <div class="title" style="backgroundColor:#F0F2FF;height:40px;">
        <div class="name">操作</div>
        <div class="extension-wrap">
          <i class="icon-predict-more extension-icon"></i>
        </div>
        <ul class="table-type-wrap">
          <li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
          <li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
          <li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
        </ul>
      </div>
      <ul class="button-group">
        <li v-for="(item,index) in data" class="global_table_item">
            <a target="_blank" v-if="item.auditState != 'SCP'" :href="'#/withdrawAudit?id='+item.id+'&ddtab=true'">查看</a>
            <a target="_blank" v-if="item.auditState == 'SCP'" :href="'#/withdrawPlan?id='+item.id+'&ddtab=true'">查看</a>
            <!--草稿、业务审核不通过、财务审核不通过 提交后变为待业务审核-->
            <a target="_blank" v-if="item.auditState == 'FBP' || item.auditState == 'FCP' || item.auditState == 'CG'" data-control="c57" class="js-access-control" @click="checkWithout(item.zlfName,item.withdrawDate,item.amountReceived,item.amountRefund,item.id,item.projectId,item.contractId)">提交</a>
        </li>
      </ul>
    </div>
  </section>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="pageCount" width="80" @on-change="pageSelect"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="search"></hl-pagination>
    </div>
  </div>

  <!--提交审核确认-->
  <div class="hllayer-view pop box-o-shadow withdraw-confirm-layer" v-show="isShowSubmitConfirm">
    <div class="head-pop font-16"><span>提交退租</span>
      <button class="fw-close absolute close" type="button" @click="closeSubmitConfirmLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="clearfix">
        <div class="title">你正在提交</div>
        <div class="main">{{submitLayerData.zlfName}}的退租申请</div>
      </div>
      <div class="clearfix">
        <div class="title">退租时间：</div>
        <div class="main">{{submitLayerData.withdrawDate}}</div>
      </div>
      <div class="clearfix">
        <div class="title">费用合计：</div>
        <div class="main">{{submitLayerData.total}}</div>
      </div>
    </div>
    <div class="fw-button">
      <button type="button" class="fw-submit yes" @click="confirmSubmitWithdraw">确定提交</button>
      <button type="button" class="fw-submit no" @click="closeSubmitConfirmLayer">返回修改</button>
    </div>
  </div>
  <!-- 自定义列表项弹出层 -->
  <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
    <div class="head-pop font-16"><span>自定义列</span>
      <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="content text-center">
        <ul class="title-wrap">
          <li class="dy-fx-1 text-left">名称</li>
          <li class="dy-fx-2">自定义名称</li>
          <li class="dy-fx-1">状态</li>
        </ul>
        <div class="ctx-wrap" id="sortableTable">
          <ul  :class="{ 'active': item.isActive == 'Y' }"  v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
            <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
            <li class="dy-fx-1 name">{{item.name}}</li>
            <li class="dy-fx-2">
              <input type="text" class="form-control" v-model="item.displayName">
            </li>
            <li class="dy-fx-1 ">
              <span class="show-icon " :class="{'icon-Nav-contract-choice':item.isShow == 'Y' , 'icon-uncheck':item.isShow == 'N' }" @click="selectedTitleItem(item,index)">显示</span>
              <span class="hide-icon " :class="{'icon-Nav-contract-choice':item.isShow == 'N' , 'icon-uncheck':item.isShow == 'Y' }" @click="cancelSelectedTitleItem(item,index)">隐藏</span>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <div class="fw-button">
      <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
      <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
    </div>
  </div>


  <div class="hllayer-mask" v-show="isShowSubmitConfirm"></div>
  <div class="backdrop" v-if="isShowTableLayer"></div>

</section>
<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/withdraw/scripts/withdraw_list.js" charset="utf-8"></script>
